<template>
    <div class="sector-container" :style="`color:${annulusColor};width:${width}px;height:${height}px`">
        <div class="timeout">{{selfSeconds}}</div>
        <div class="sector-group" :id="`sector-group-id-${cid}`">
            <div class="sector" v-for="item in 12" :key="item+'_1'"></div>
        </div>
    </div>
</template>

<script >


export default {
    props: {
        annulusColor: {
            type: String,
            default: '#409eff'
        },
        width: {
            type: Number,
            default: 100
        },
        height: {
            type: Number,
            default: 100
        },
        seconds: {
            type: Number,
            default: 10,
            validator: (val) => {
                return val <= 60 && val >= 0
            }
        },
    },
    data () {
        return {
            cid: parseInt((Math.random() * 20 + 30) + Math.random() * 1000),
            selfSeconds: this.seconds,
            cacheDom: null
        };
    },
    // mounted () {
    //     // const eleSeconds = document.getElementById('seconds')
    //     this.fnTimeCount();
    // },
    methods: {
        initTimeout(){
            this.selfSeconds = this.seconds
            this.cacheDom  && this.clearClipDomStyle(this.cacheDom)
        },
        startTimeOut () {
            this.fnTimeCount()
        },
        restartTimeout () {
            this.$emit('brforeRestart', this.selfSeconds)
            this.selfSeconds = this.seconds
            this.fnTimeCount()
        },
        stopTimeOut () {
            this.$emit('brforeRestart', this.selfSeconds)
            this._timeIn && clearInterval(this._timeIn)
        },
        fnTimeCount () {
            const eleCircle = this.cacheDom || document.querySelector(`#sector-group-id-${this.cid}`);
            if (eleCircle) {
                this.cacheDom = eleCircle
                this.clearClipDomStyle(eleCircle)
                if (this._timeIn) {
                    clearInterval(this._timeIn)
                }
                this._timeIn = setInterval(() => {
                    this.step(eleCircle);
                }, 1000);
            }
        },
        step (clipDom) {

            this.selfSeconds--;
            // 圆环匹配
            let percent = this.selfSeconds / 10;
            let a = this.width / 2,
                b = this.height / 2,
                r = 500;
            let angle = (Math.PI / 180) * (360 * percent - 90);
            let x = a + r * Math.cos(angle);
            let y = b + r * Math.sin(angle);

            // 总共7个点
            let p1, p2, p3, p4, p5, p6, p7 = [a, b];
            if (x < a) {
                p2 = [a, b - r];
                p3 = [a + r, b - r];
                p4 = [a + r, b + r];
                p5 = [a, b + r];
                p6 = [a - r, b];
                p7 = [x, y];
                if (y > b) {
                    p6 = p7;
                }
            } else {
                p2 = [a, b - r];
                p3 = [a + r, b - r];
                p4 = [a + r, b];
                p5 = [x, y];
                p6 = p5;
                p7 = p5;
                if (y < b) {
                    p4 = [x, y]
                }
            }
            let pointArry = [[a, b], p2, p3, p4, p5, p6, p7];
            let pxString = pointArry.map((arry) => {
                return arry.map((item) => {
                    return item + "px";
                }).join(" ");
            }).join(",");
            clipDom.style.clipPath = `polygon(${pxString})`;
            if (this.selfSeconds <= 0) {
                this._timeIn && clearInterval(this._timeIn);
                this.$emit('nextStep')
            }

        },
        clearClipDomStyle (clipDom) {
            clipDom.style.clipPath = ""
        }
    },
    beforeDestroy () {
        if (this._timeIn) {
            clearInterval(this._timeIn)
        }
    }
};
</script>

<style lang="scss" scope>
.sector-container {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    .timeout {
        position: absolute;
        height: 100%;
        width: 100%;
        color: #fff;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sector-group {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        filter: blur(10px);
        transform: scale(1.5);
        -webkit-mask: radial-gradient(transparent 30%, #000 31%);
    }
    .sector {
        position: absolute;
        bottom: 0;
        left: 0;
        // transform-origin: right center;
        // color: #9ed110;
        width: 100%;
        height: 100%;
        clip-path: inset(0 0 0 50%);
        overflow: hidden;
        border-radius: 50%;
        // background-color: #9ed110;
        @for $index from 0 through 12 {
            &:nth-of-type(#{$index + 1}) {
                transform: rotate($index * 30deg);
                // background-color: #F56C6C;
                // color: rgb(255- (3 * $index), 200 - (2 * $index), 25 + 3 * $index);
            }
        }
        &::after {
            content: "";
            width: 100%;
            height: 100%;
            background: currentColor;
            position: absolute;
            clip-path: inset(0 50% 0 0);
            transform: rotate(30deg);
            // border-radius: 50%;
            // border: currentColor;
            // background-color: #9ed110;
        }
    }
}
</style>